import React, { Component } from 'react';

import './index.css'

class Footer extends Component {

    onChangeCheckTodo = (event) => {
        this.props.onChangeCheckedTodo(event.target.checked)
    } 

    deleteTodoAll = () => {
        this.props.deleteTodoAll()
    }

    render() {

        const {todos} = this.props
        const checkedTodo = todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0)
        const todoLength = todos.length

        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={checkedTodo === todoLength && todoLength !== 0? true : false} onChange={this.onChangeCheckTodo}/>
                </label>
                <span>
                    <span>已完成{checkedTodo}</span> / 全部{todoLength}
                </span>
                <button className="btn btn-danger" onClick={this.deleteTodoAll}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;